<template>
    <div class="manylayer-content">
        <div class="manylayer-content-block">
            <div>
                <div>
                    <span style="font-size: 14px;color: #e3b337">样式名称：</span>
                    <br>
                    <el-input v-model="stylername" placeholder="请输入样式名称" style="width: 200px"></el-input>
                </div>
                <div>

                </div>
                <span style="font-size: 14px;color: #e3b337">样式规则：</span>
                <br>
                <el-select style="width: 200px" v-model="symbolvalue" placeholder="请选择" @change="selectRule()">
                    <el-option
                            v-for="item in symboloptions"
                            :key="item.symbolvalue"
                            :label="item.symbollabel"
                            :value="item.symbolvalue">
                    </el-option>
                </el-select>
                <br>
                <div>
                    <el-checkbox style="font-size: 14px;color: #e3b337" v-model="textchecked" label="添加标注" border @change="textchecked===!textchecked"></el-checkbox>
                </div>


            </div>
            <!--单一样式-->
            <el-tabs type="border-card" v-show="!ruleselect" style="width: 100%">
                <el-tab-pane label="样式">
                    <!--点样式板块-->
                    <div v-if="featurevalue === 'point' & !ruleselect">
                        <pointstyler :cstyleobject="pointStyleObject" @changePTStyle="postSLD()"></pointstyler>
                    </div>
                    <!--线样式板块-->
                    <div v-if="featurevalue === 'polyline' & !ruleselect">
                        <polylinestyler :cstyleobject="polylineStyleObject" @changePLStyle="postSLD()"></polylinestyler>
                    </div>
                    <!--面样式板块-->
                    <div v-if="featurevalue === 'polygon' & !ruleselect">
                        <polygonstyler :cstyleobject="predefineStyleObject" @changePGStyle="postSLD()"></polygonstyler>
                    </div>
                    <!--标注面板-->
                </el-tab-pane>
                <el-tab-pane label="标注" v-if="textchecked" >
                    <!--标注样式板块-->
                    <span style="font-size: 14px;color: #00b1d6">标注字段</span>
                    <el-select style="width: 200px" v-model="textfieldvalue" placeholder="请选择标注字段">
                        <el-option
                                v-for="item in fieldoptions"
                                :key="item.fieldvalue"
                                :label="item.fieldlabel"
                                :value="item.fieldvalue">
                        </el-option>
                    </el-select>
                    <div v-if="textchecked & !ruleselect">
                        <textstyler :cstyleobject="predefineStyleObject" @changeTextStyle="postSLD()"></textstyler>
                    </div>
                </el-tab-pane>
            </el-tabs>



            <!--基于规则-->
            <el-tabs type="border-card" v-show="ruleselect">
                <el-tab-pane label="样式规则">
                    <div class="clearfix">
                        <span style="font-size: 14px;color: #00b1d6">分类规则(属性字段)</span>
                        <el-select style="width: 200px" v-model="fieldvalue" placeholder="请选择属性字段" @change="showFieldContent()">
                            <el-option
                                    v-for="item in fieldoptions"
                                    :key="item.fieldvalue"
                                    :label="item.fieldlabel"
                                    :value="item.fieldvalue">
                            </el-option>
                        </el-select>
                        <el-button style="float: right; padding: 3px 0" type="text" @click="restoreDefault">恢复默认</el-button>
                        <el-button type="primary" style="float: right; padding: 3px 5px" @click="postSLD">提交</el-button>
                    </div>
                    <div>
                        <el-table
                                ref="multipleTable"
                                :data="tableData"
                                border
                                tooltip-effect="dark"
                                style="width: 100%"
                                max-height="400px"
                                @selection-change="handleSelectionChange">
                            <el-table-column
                                    type="selection"
                                    width="30">
                            </el-table-column>
                            <el-table-column
                                    prop="styleObject"
                                    label="样式"
                                    width="60">
                                <template slot-scope="scope">
                                    <el-popover
                                            placement="right"
                                            width="400"
                                            trigger="click"
                                            v-model="scope.row.styleObject.cvisible">
                                        <!--面样式板块-->
                                        <polygonstyler :cstyleobject="scope.row.styleObject" @changePGStyle="scope.row.styleObject.cvisible = false" v-if="featurevalue === 'polygon'"></polygonstyler>
                                        <polylinestyler :cstyleobject="scope.row.styleObject" @changePLStyle="scope.row.styleObject.cvisible = false" v-if="featurevalue === 'polyline'"></polylinestyler>
                                        <pointstyler :cstyleobject="scope.row.styleObject" @changePTStyle="scope.row.styleObject.cvisible = false" v-if="featurevalue === 'point'"></pointstyler>
                                        <input slot="reference" type="button" :style="{height:'20px',width:'40px',background: scope.row.styleObject.cfillcolor}"></input>
                                    </el-popover>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="name"
                                    label="名称"
                                    width="50">
                            </el-table-column>
                            <el-table-column
                                    prop="content"
                                    label="过滤规则">
                            </el-table-column>
                        </el-table>
                        <div style="margin-top: 20px">
                            <el-button @click="handleAdd()">+添加</el-button>
                            <el-button type="danger" @click="handleDelete()">-移除</el-button>
                        </div>
                    </div>
                    <!--标注面板-->
                </el-tab-pane>
                <el-tab-pane label="标注规则" v-if="textchecked">
                    <div>
                        <div class="clearfix">
                            <span style="font-size: 14px;color: #00b1d6">标注字段</span>
                            <br>
                            <el-select style="width: 200px" v-if="textchecked" v-model="textfieldvalue" placeholder="请选择标注字段" @change="showTextStyleContent()">
                                <el-option
                                        v-for="item in fieldoptions"
                                        :key="item.fieldvalue"
                                        :label="item.fieldlabel"
                                        :value="item.fieldvalue">
                                </el-option>
                            </el-select>
                            <el-button style="float: right; padding: 3px 0" type="text" @click="textRestoreDefault">恢复默认</el-button>
                            <el-button type="primary" style="float: right; padding: 3px 10px" @click="postSLD">提交</el-button>
                        </div>
                        <el-table
                                ref="textMultipleTable"
                                :data="textTableData"
                                border
                                tooltip-effect="dark"
                                style="width: 100%"
                                max-height="400px"
                                @selection-change="textHandleSelectionChange">
                            <el-table-column
                                    type="selection"
                                    width="30">
                            </el-table-column>
                            <el-table-column
                                    prop="textStyleObject"
                                    label="样式"
                                    width="60">
                                <template slot-scope="scope">
                                    <el-popover
                                            placement="right"
                                            width="400"
                                            trigger="click"
                                            v-model="scope.row.textStyleObject.cvisible">
                                        <!--面样式板块-->
                                        <textstyler :cstyleobject="scope.row.textStyleObject" @changeTextStyle="scope.row.textStyleObject.cvisible = false"></textstyler>
                                        <input slot="reference" type="button" :style="{height:'20px',width:'40px',background: scope.row.textStyleObject.ctextcolor}"></input>
                                    </el-popover>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="name"
                                    label="名称"
                                    width="120">
                            </el-table-column>
                            <el-table-column
                                    prop="content"
                                    label="过滤规则">
                            </el-table-column>
                        </el-table>
                        <div style="margin-top: 20px">
                            <el-button @click="texthandleAdd()">+添加</el-button>
                            <el-button type="danger" @click="texthandleDelete()">-移除</el-button>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>


        </div>
    </div>
</template>
<script>
import {dict} from '../../../utils/map/dictFilter';
import {onlineStyler,getTableColumn,getTableValue} from "../../../api/cydtRequest";
//import {getTableColumn,getTableValue} from "../../../api/cydtRequest";
//import {onlineStyler} from "../../../api/api";
//导入各类样式组件
import polygonstyler from "./polygonstyler";
import polylinestyler from "./polylinestyler";
import pointstyler from "./pointstyler";
import textstyler from "./textstyler";
import bus from "../../../assets/js/eventBus";
let that
export default {
    props:['editlayername'],

    components: {polygonstyler,polylinestyler,pointstyler,textstyler},
    watch: {
        editlayername(newV,oldV) {
            this.layername=newV

        }},

    beforeCreate () {
        that = this;
    },
        data() {
            return {
                stylername: 'test_Styler',
                layername:'',

                featurevalue: 'polygon',
                textchecked: false,

                symboloptions: [{
                    symbolvalue: 'single',
                    symbollabel: '单一符号'
                }, {
                    symbolvalue: 'rule',
                    symbollabel: '基于规则'
                }],
                symbolvalue: 'single',

                tableData: [],
                textTableData: [],
                multipleSelection: [],
                textMultipleSelection: [],


                fieldoptions: [],
                fieldvalue: '',
                textfieldvalue: '',
                fieldcontents: [],
                ruleselect: false,

                predefineStyleObject: {
                    csymbolcategoryvalue: 'circle',
                    csymbolsize: 1,
                    csymbolopacity: 1,
                    csymbolrotation: 0,
                    cfillcolor: '#95989A',
                    cfillopacity: 1,
                    cbordercolor: '#95989A',
                    cborderopacity: 1,
                    clinewidth: 1,
                    ctextcolor:'#000000',
                    ctextsize:12,
                    cxoffset:0,
                    cyoffset:0,
                    cfontvalue:'黑体',
                    cminscale:'500000',
                    cmaxscale:'0',
                    //还在考虑是否等样式设置完毕后再生成sld-0421
                    cstylestring: `
          <PolygonSymbolizer>
            <Fill>
              <CssParameter name="fill">#95989A</CssParameter>
              <CssParameter name="fill-opacity">1</CssParameter>
            </Fill>
            <Stroke>
              <CssParameter name="stroke-opacity">1</CssParameter>
              <CssParameter name="stroke">#95989A</CssParameter>
              <CssParameter name="stroke-width">1</CssParameter>
            </Stroke>
          </PolygonSymbolizer>`,
                    cvisible: false
                },
            };
        },
    computed:{
        //基于规则——根据各模板子模块，生成SLDContent
        //RSPG-RuleSymbolPolygon
        SLDContentRSPG:function () {
            let SLDContentTitle =
                `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
      <StyledLayerDescriptor version="1.0.0" xsi:schemaLocation="http://www.opengis.net/sld StyledLayerDescriptor.xsd" xmlns="http://www.opengis.net/sld" xmlns:ogc="http://www.opengis.net/ogc" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
        <NamedLayer>
          <Name>`+this.stylername+`</Name>
          <UserStyle>
            <Name>`+this.stylername+`</Name>
            <Title>`+this.stylername+`</Title>
            <FeatureTypeStyle>`;
            let SLDContentRules =``;
            //基于规则
            if(this.symbolvalue==="rule"){
                for(let i=0;i<this.tableData.length;i++){
                    let RuleStr =
                        `
              <Rule>
                <Name>`+this.tableData[i].name+`</Name>
                <Filter xmlns="http://www.opengis.net/ogc">
                  <PropertyIsEqualTo>
                    <PropertyName>`+this.fieldvalue+`</PropertyName>
                    <Literal>`+this.tableData[i].name+`</Literal>
                  </PropertyIsEqualTo>
                </Filter>
                <MinScaleDenominator>`+this.tableData[i].styleObject.cmaxscale+`</MinScaleDenominator>
                <MaxScaleDenominator>`+this.tableData[i].styleObject.cminscale+`</MaxScaleDenominator>
                <PolygonSymbolizer>
                  <Fill>
                    <CssParameter name="fill">`+this.tableData[i].styleObject.cfillcolor+`</CssParameter>
                    <CssParameter name="fill-opacity">`+this.tableData[i].styleObject.cfillopacity+`</CssParameter>
                  </Fill>
                  <Stroke>
                    <CssParameter name="stroke">`+this.tableData[i].styleObject.cbordercolor+`</CssParameter>
                    <CssParameter name="stroke-width">`+this.tableData[i].styleObject.clinewidth+`</CssParameter>
                    <CssParameter name="stroke-opacity">`+this.tableData[i].styleObject.cborderopacity+`</CssParameter>
                  </Stroke>
                </PolygonSymbolizer>
              </Rule>`;
                    SLDContentRules += RuleStr;
                }
                //若有标注，则加上
                if(this.textchecked){
                    for(let i=0;i<this.textTableData.length;i++){
                        let RuleStr =
                            `
              <Rule>
                <Name>`+this.textTableData[i].name+`</Name>
                <MinScaleDenominator>`+this.textTableData[i].textStyleObject.cmaxscale+`</MinScaleDenominator>
                <MaxScaleDenominator>`+this.textTableData[i].textStyleObject.cminscale+`</MaxScaleDenominator>
                <TextSymbolizer>
                  <Label>
                    <ogc:PropertyName>`+this.textfieldvalue+`</ogc:PropertyName>
                  </Label>
                  <Font>
                    <CssParameter name="font-size">`+this.textTableData[i].textStyleObject.ctextsize+`</CssParameter>
                    <CssParameter name="font-family">`+this.textTableData[i].textStyleObject.cfontvalue+`</CssParameter>
                  </Font>
                  <LabelPlacement>
                    <PointPlacement>
                      <Displacement>
                        <DisplacementX>`+this.textTableData[i].textStyleObject.cxoffset+`</DisplacementX>
                        <DisplacementY>`+this.textTableData[i].textStyleObject.cyoffset+`</DisplacementY>
                      </Displacement>
                      <Rotation>`+this.textTableData[i].textStyleObject.csymbolrotation+`</Rotation>
                    </PointPlacement>
                  </LabelPlacement>
                  <Fill>
                    <CssParameter name="fill">`+this.textTableData[i].textStyleObject.ctextcolor+`</CssParameter>
                  </Fill>
                </TextSymbolizer>
              </Rule>`;
                        SLDContentRules += RuleStr;
                    }
                }

            }else {
                let RuleStr =
                    `
              <Rule>
                <Name>Rule 1</Name>
                <MinScaleDenominator>`+this.predefineStyleObject.cmaxscale+`</MinScaleDenominator>
                <MaxScaleDenominator>`+this.predefineStyleObject.cminscale+`</MaxScaleDenominator>
                <PolygonSymbolizer>
                  <Fill>
                    <CssParameter name="fill">`+this.predefineStyleObject.cfillcolor+`</CssParameter>
                    <CssParameter name="fill-opacity">`+this.predefineStyleObject.cfillopacity+`</CssParameter>
                  </Fill>
                  <Stroke>
                    <CssParameter name="stroke">`+this.predefineStyleObject.cbordercolor+`</CssParameter>
                    <CssParameter name="stroke-width">`+this.predefineStyleObject.clinewidth+`</CssParameter>
                    <CssParameter name="stroke-opacity">`+this.predefineStyleObject.cborderopacity+`</CssParameter>
                  </Stroke>
                </PolygonSymbolizer>
              </Rule>`;
                SLDContentRules += RuleStr;

                //若有标注，则加上
                if(this.textchecked){
                    let RuleStr =
                        `
              <Rule>
                <Name>LableRule 1</Name>
                <MinScaleDenominator>`+this.predefineStyleObject.cmaxscale+`</MinScaleDenominator>
                <MaxScaleDenominator>`+this.predefineStyleObject.cminscale+`</MaxScaleDenominator>
                <TextSymbolizer>
                  <Label>
                    <ogc:PropertyName>`+this.textfieldvalue+`</ogc:PropertyName>
                  </Label>
                  <Font>
                    <CssParameter name="font-size">`+this.predefineStyleObject.ctextsize+`</CssParameter>
                    <CssParameter name="font-family">`+this.predefineStyleObject.cfontvalue+`</CssParameter>
                  </Font>
                  <LabelPlacement>
                    <PointPlacement>
                      <Displacement>
                        <DisplacementX>`+this.predefineStyleObject.cxoffset+`</DisplacementX>
                        <DisplacementY>`+this.predefineStyleObject.cyoffset+`</DisplacementY>
                      </Displacement>
                      <Rotation>`+this.predefineStyleObject.csymbolrotation+`</Rotation>
                    </PointPlacement>
                  </LabelPlacement>
                  <Fill>
                    <CssParameter name="fill">`+this.predefineStyleObject.ctextcolor+`</CssParameter>
                  </Fill>
                </TextSymbolizer>
              </Rule>`;
                    SLDContentRules += RuleStr;
                }

            }

            let SLDContentTail =
                `
            </FeatureTypeStyle>
          </UserStyle>
        </NamedLayer>
      </StyledLayerDescriptor>`;
            let SLDContent=SLDContentTitle+SLDContentRules+SLDContentTail;
            return SLDContent;
        },

        //RSPL-RuleSymbolPolyline
        SLDContentRSPL:function () {
            let SLDContentTitle =
                `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
      <StyledLayerDescriptor version="1.0.0" xsi:schemaLocation="http://www.opengis.net/sld StyledLayerDescriptor.xsd" xmlns="http://www.opengis.net/sld" xmlns:ogc="http://www.opengis.net/ogc" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
        <NamedLayer>
          <Name>`+this.stylername+`</Name>
          <UserStyle>
            <Name>`+this.stylername+`</Name>
            <Title>`+this.stylername+`</Title>
            <FeatureTypeStyle>`;
            let SLDContentRules =``;

            if(this.symbolvalue==="rule"){
                for(let i=0;i<this.tableData.length;i++){
                    let RuleStr =
                        `
              <Rule>
                <Name>`+this.tableData[i].name+`</Name>
                <Filter xmlns="http://www.opengis.net/ogc">
                  <PropertyIsEqualTo>
                    <PropertyName>`+this.fieldvalue+`</PropertyName>
                    <Literal>`+this.tableData[i].name+`</Literal>
                  </PropertyIsEqualTo>
                </Filter>
                <MinScaleDenominator>`+this.tableData[i].styleObject.cmaxscale+`</MinScaleDenominator>
                <MaxScaleDenominator>`+this.tableData[i].styleObject.cminscale+`</MaxScaleDenominator>
                <LineSymbolizer>
                  <Stroke>
                    <CssParameter name="stroke">`+this.tableData[i].styleObject.cbordercolor+`</CssParameter>
                    <CssParameter name="stroke-width">`+this.tableData[i].styleObject.clinewidth+`</CssParameter>
                    <CssParameter name="stroke-opacity">`+this.tableData[i].styleObject.cborderopacity+`</CssParameter>
                  </Stroke>
                </LineSymbolizer>
              </Rule>`;
                    SLDContentRules += RuleStr;
                }
            }else{
                let RuleStr =
                    `
              <Rule>
                <Name>Rule 1</Name>
                <MinScaleDenominator>`+this.predefineStyleObject.cmaxscale+`</MinScaleDenominator>
                <MaxScaleDenominator>`+this.predefineStyleObject.cminscale+`</MaxScaleDenominator>
                <LineSymbolizer>
                  <Stroke>
                    <CssParameter name="stroke">`+this.predefineStyleObject.cbordercolor+`</CssParameter>
                    <CssParameter name="stroke-width">`+this.predefineStyleObject.clinewidth+`</CssParameter>
                    <CssParameter name="stroke-opacity">`+this.predefineStyleObject.cborderopacity+`</CssParameter>
                  </Stroke>
                </LineSymbolizer>
              </Rule>`;
                SLDContentRules += RuleStr;
            }

            //若有标注，则加上
            if(this.textchecked){
                for(let i=0;i<this.textTableData.length;i++){
                    let RuleStr =
                        `
              <Rule>
                <Name>`+this.textTableData[i].name+`</Name>
                <MinScaleDenominator>`+this.textTableData[i].textStyleObject.cmaxscale+`</MinScaleDenominator>
                <MaxScaleDenominator>`+this.textTableData[i].textStyleObject.cminscale+`</MaxScaleDenominator>
                <TextSymbolizer>
                  <Label>
                    <ogc:PropertyName>`+this.textfieldvalue+`</ogc:PropertyName>
                  </Label>
                  <Font>
                    <CssParameter name="font-size">`+this.textTableData[i].textStyleObject.ctextsize+`</CssParameter>
                    <CssParameter name="font-family">`+this.textTableData[i].textStyleObject.cfontvalue+`</CssParameter>
                  </Font>
                  <LabelPlacement>
                    <PointPlacement>
                      <Displacement>
                        <DisplacementX>`+this.textTableData[i].textStyleObject.cxoffset+`</DisplacementX>
                        <DisplacementY>`+this.textTableData[i].textStyleObject.cyoffset+`</DisplacementY>
                      </Displacement>
                      <Rotation>`+this.textTableData[i].textStyleObject.csymbolrotation+`</Rotation>
                    </PointPlacement>
                  </LabelPlacement>
                  <Fill>
                    <CssParameter name="fill">`+this.textTableData[i].textStyleObject.ctextcolor+`</CssParameter>
                  </Fill>
                </TextSymbolizer>
              </Rule>`;
                    SLDContentRules += RuleStr;
                }
            }

            let SLDContentTail =
                `
            </FeatureTypeStyle>
          </UserStyle>
        </NamedLayer>
      </StyledLayerDescriptor>`;
            let SLDContent=SLDContentTitle+SLDContentRules+SLDContentTail;
            return SLDContent;
        },

        //RSPT-RuleSymbolPoint
        SLDContentRSPT:function () {
            let SLDContentTitle =
                `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
      <StyledLayerDescriptor version="1.0.0" xsi:schemaLocation="http://www.opengis.net/sld StyledLayerDescriptor.xsd" xmlns="http://www.opengis.net/sld" xmlns:ogc="http://www.opengis.net/ogc" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
        <NamedLayer>
          <Name>`+this.stylername+`</Name>
          <UserStyle>
            <Name>`+this.stylername+`</Name>
            <Title>`+this.stylername+`</Title>
            <FeatureTypeStyle>`;
            let SLDContentRules =``;
            if(this.symbolvalue==="rule"){
                for(let i=0;i<this.tableData.length;i++){
                    let RuleStr =
                        `
              <Rule>
                <Name>`+this.tableData[i].name+`</Name>
                <Filter xmlns="http://www.opengis.net/ogc">
                  <PropertyIsEqualTo>
                    <PropertyName>`+this.fieldvalue+`</PropertyName>
                    <Literal>`+this.tableData[i].name+`</Literal>
                  </PropertyIsEqualTo>
                </Filter>
                <MinScaleDenominator>`+this.tableData[i].styleObject.cmaxscale+`</MinScaleDenominator>
                <MaxScaleDenominator>`+this.tableData[i].styleObject.cminscale+`</MaxScaleDenominator>
                <PointSymbolizer>
                  <Graphic>
                    <Mark>
                      <WellKnownName>`+this.tableData[i].styleObject.csymbolcategoryvalue+`</WellKnownName>
                      <Fill>
                        <CssParameter name="fill">`+this.tableData[i].styleObject.cfillcolor+`</CssParameter>
                        <CssParameter name="fill-opacity">`+this.tableData[i].styleObject.cfillopacity+`</CssParameter>
                      </Fill>
                      <Stroke>
                        <CssParameter name="stroke">`+this.tableData[i].styleObject.cbordercolor+`</CssParameter>
                        <CssParameter name="stroke-width">`+this.tableData[i].styleObject.clinewidth+`</CssParameter>
                        <CssParameter name="stroke-opacity">`+this.tableData[i].styleObject.cborderopacity+`</CssParameter>
                      </Stroke>
                    </Mark>
                    <Opacity>`+this.tableData[i].styleObject.csymbolopacity+`</Opacity>
                    <Size>`+this.tableData[i].styleObject.csymbolsize+`</Size>
                    <Rotation>`+this.tableData[i].styleObject.csymbolrotation+`</Rotation>
                  </Graphic>
                </PointSymbolizer>
              </Rule>`;
                    SLDContentRules += RuleStr;
                }
            }else{
                let RuleStr =
                    `
              <Rule>
                <Name>Rule 1</Name>
                <MinScaleDenominator>`+this.predefineStyleObject.cmaxscale+`</MinScaleDenominator>
                <MaxScaleDenominator>`+this.predefineStyleObject.cminscale+`</MaxScaleDenominator>
                <PointSymbolizer>
                  <Graphic>
                    <Mark>
                      <WellKnownName>`+this.predefineStyleObject.csymbolcategoryvalue+`</WellKnownName>
                      <Fill>
                        <CssParameter name="fill">`+this.predefineStyleObject.cfillcolor+`</CssParameter>
                        <CssParameter name="fill-opacity">`+this.predefineStyleObject.cfillopacity+`</CssParameter>
                      </Fill>
                      <Stroke>
                        <CssParameter name="stroke">`+this.predefineStyleObject.cbordercolor+`</CssParameter>
                        <CssParameter name="stroke-width">`+this.predefineStyleObject.clinewidth+`</CssParameter>
                        <CssParameter name="stroke-opacity">`+this.predefineStyleObject.cborderopacity+`</CssParameter>
                      </Stroke>
                    </Mark>
                    <Opacity>`+this.predefineStyleObject.csymbolopacity+`</Opacity>
                    <Size>`+this.predefineStyleObject.csymbolsize+`</Size>
                    <Rotation>`+this.predefineStyleObject.csymbolrotation+`</Rotation>
                  </Graphic>
                </PointSymbolizer>
              </Rule>`;
                SLDContentRules += RuleStr;
            }

            //若有标注，则加上
            if(this.textchecked){
                for(let i=0;i<this.textTableData.length;i++){
                    let RuleStr =
                        `
              <Rule>
                <Name>`+this.textTableData[i].name+`</Name>
                <MinScaleDenominator>`+this.textTableData[i].textStyleObject.cmaxscale+`</MinScaleDenominator>
                <MaxScaleDenominator>`+this.textTableData[i].textStyleObject.cminscale+`</MaxScaleDenominator>
                <TextSymbolizer>
                  <Label>
                    <ogc:PropertyName>`+this.textfieldvalue+`</ogc:PropertyName>
                  </Label>
                  <Font>
                    <CssParameter name="font-size">`+this.textTableData[i].textStyleObject.ctextsize+`</CssParameter>
                    <CssParameter name="font-family">`+this.textTableData[i].textStyleObject.cfontvalue+`</CssParameter>
                  </Font>
                  <LabelPlacement>
                    <PointPlacement>
                      <Displacement>
                        <DisplacementX>`+this.textTableData[i].textStyleObject.cxoffset+`</DisplacementX>
                        <DisplacementY>`+this.textTableData[i].textStyleObject.cyoffset+`</DisplacementY>
                      </Displacement>
                      <Rotation>`+this.textTableData[i].textStyleObject.csymbolrotation+`</Rotation>
                    </PointPlacement>
                  </LabelPlacement>
                  <Fill>
                    <CssParameter name="fill">`+this.textTableData[i].textStyleObject.ctextcolor+`</CssParameter>
                  </Fill>
                </TextSymbolizer>
              </Rule>`;
                    SLDContentRules += RuleStr;
                }
            }

            let SLDContentTail =
                `
            </FeatureTypeStyle>
          </UserStyle>
        </NamedLayer>
      </StyledLayerDescriptor>`;
            let SLDContent=SLDContentTitle+SLDContentRules+SLDContentTail;
            return SLDContent;
        },


        //获取数据字段信息,存入TableColumn
        TableColumn:function (){
            let that=this;
            let tablename=that.layername;
            let tablecolums=[];
            getTableColumn(tablename).then(r=>{
                if (r) {
                    let list=r.data;
                    list.forEach(item=>{
                        tablecolums.push(
                            {
                                fieldvalue: item.toString(),
                                fieldlabel: item.toString()
                            })
                    });
                }
            });
            return tablecolums;
        },

    },
        methods:{
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },

            textHandleSelectionChange(val) {
                this.textMultipleSelection = val;
            },

            //添加一行
            handleAdd(){
                let that = this;
                let ruleName = that.fieldvalue +"=";
                that.$prompt(ruleName, '新增规则', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(({ value }) => {
                    that.tableData.push({
                        styleObject:{
                            csymbolcategoryvalue: that.predefineStyleObject.csymbolcategoryvalue,
                            csymbolsize: that.predefineStyleObject.csymbolsize,
                            csymbolopacity: that.predefineStyleObject.csymbolopacity,
                            csymbolrotation: that.predefineStyleObject.csymbolrotation,
                            cfillcolor: that.predefineStyleObject.cfillcolor,
                            cfillopacity: that.predefineStyleObject.cfillopacity,
                            cbordercolor: that.predefineStyleObject.cbordercolor,
                            cborderopacity: that.predefineStyleObject.cborderopacity,
                            clinewidth: that.predefineStyleObject.clinewidth,
                            cminscale: that.predefineStyleObject.cminscale,
                            cmaxscale: that.predefineStyleObject.cmaxscale,
                            //cstylestring: that.predefineStyleObject.cstylestring,
                            cvisible: that.predefineStyleObject.cvisible
                        },
                        name: value,
                        content: that.fieldvalue +"="+ value,
                        minscale: '',
                        maxscale: ''
                    });
                    that.$message({
                        type: 'success',
                        message: '你输入规则是: '+ that.fieldvalue +"="+ value
                    });
                    //console.log(value);

                }).catch(() => {
                    that.$message({
                        type: 'info',
                        message: '取消输入'
                    });
                });


            },

            //批量删除选中要素
            handleDelete() {
                let that = this;
                let val = this.multipleSelection;
                if (val) {
                    val.forEach(function(item, index) {
                        that.tableData.forEach(function(itemI, indexI) {
                            if (item === itemI) {
                                that.tableData.splice(indexI, 1);
                            }
                        });
                    });
                }
                this.$refs.multipleTable.clearSelection();
            },

            //添加一行(textstyle表格)
            texthandleAdd(){
                let that = this;
                let ruleName = '标注规则';
                that.$prompt(ruleName, '新增规则', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(({ value }) => {
                    that.textTableData.push({
                        textStyleObject:{
                            ctextcolor: that.predefineStyleObject.ctextcolor,
                            cfontvalue: that.predefineStyleObject.cfontvalue,
                            cminscale: that.predefineStyleObject.cminscale,
                            cmaxscale: that.predefineStyleObject.cmaxscale,
                            ctextsize: that.predefineStyleObject.ctextsize,
                            cxoffset: that.predefineStyleObject.cxoffset,
                            cyoffset: that.predefineStyleObject.cyoffset,
                            csymbolrotation: that.predefineStyleObject.csymbolrotation,
                            cvisible: that.predefineStyleObject.cvisible
                        },
                        name: value,
                        content: '标注字段=' +that.textfieldvalue,
                        minscale: '',
                        maxscale: ''
                    });
                    that.$message({
                        type: 'success',
                        message: '你新增的规则是: '+ value
                    });
                    //console.log(value);

                }).catch(() => {
                    that.$message({
                        type: 'info',
                        message: '取消输入'
                    });
                });


            },

            //批量删除选中要素(textstyle表格)
            texthandleDelete() {
                let that = this;
                let val = this.textMultipleSelection;
                if (val) {
                    val.forEach(function(item, index) {
                        that.textTableData.forEach(function(itemI, indexI) {
                            if (item === itemI) {
                                that.textTableData.splice(indexI, 1);
                            }
                        });
                    });
                }
                this.$refs.textMultipleTable.clearSelection();
            },




            //切换样式规则事件
            selectRule(){
                let that = this;
                that.ruleselect = false;
                if(that.symbolvalue === "rule"){
                    that.ruleselect = true;
                    //获取属性列表
                    let tablename=that.layername;
                    let tablecolums=[];
                    getTableColumn(tablename).then(r=>{
                        if (r) {
                            let list=r.data;
                            list.forEach(item=>{
                                tablecolums.push(
                                    {
                                        fieldvalue: item.toString(),
                                        fieldlabel: item.toString()
                                    })
                            });
                        }
                    });
                    that.fieldoptions=tablecolums;
                }
            },

            //显示属性字段并筛选
            showFieldContent(){
                let that = this;
                //向后台请求，获取属性字段的类别,存入fieldcontents,考虑到每次切换都需要重新请求，故不适合写到computed中
                let tablename=that.layername;
                let columnname=that.fieldvalue;
                that.tableData=[];
                console.log(tablename);
                console.log(columnname);
                getTableValue(tablename,columnname).then(r=>{
                    if (r) {
                        let list=r.data;
                        list.forEach(item=>{
                            that.tableData.push({
                                styleObject:{
                                    csymbolcategoryvalue: that.predefineStyleObject.csymbolcategoryvalue,
                                    csymbolsize: that.predefineStyleObject.csymbolsize,
                                    csymbolopacity: that.predefineStyleObject.csymbolopacity,
                                    csymbolrotation: that.predefineStyleObject.csymbolrotation,
                                    cfillcolor: that.predefineStyleObject.cfillcolor,
                                    cfillopacity: that.predefineStyleObject.cfillopacity,
                                    cbordercolor: that.predefineStyleObject.cbordercolor,
                                    cborderopacity: that.predefineStyleObject.cborderopacity,
                                    clinewidth: that.predefineStyleObject.clinewidth,
                                    cminscale: that.predefineStyleObject.cminscale,
                                    cmaxscale: that.predefineStyleObject.cmaxscale,
                                    //cstylestring: that.predefineStyleObject.cstylestring,
                                    cvisible: that.predefineStyleObject.cvisible,
                                },
                                name: item.toString(),
                                content: that.fieldvalue +"="+item.toString(),
                                minscale: '',
                                maxscale: ''
                            })
                        });
                    }
                });


            },

            //打开标注样式编辑列表
            showTextStyleContent(){
                let that = this;
                that.textTableData=[];
                that.textTableData.push({
                    textStyleObject:{
                        ctextcolor: that.predefineStyleObject.ctextcolor,
                        cfontvalue: that.predefineStyleObject.cfontvalue,
                        cminscale: that.predefineStyleObject.cminscale,
                        cmaxscale: that.predefineStyleObject.cmaxscale,
                        ctextsize: that.predefineStyleObject.ctextsize,
                        cxoffset: that.predefineStyleObject.cxoffset,
                        cyoffset: that.predefineStyleObject.cyoffset,
                        csymbolrotation: that.predefineStyleObject.csymbolrotation,
                        cvisible: that.predefineStyleObject.cvisible
                    },
                    name: '标注规则1',
                    content: "标注字段=" +that.textfieldvalue,
                    minscale: '',
                    maxscale: ''
                });

            },

            //样式面板恢复默认
            restoreDefault(){
                this.showFieldContent();
            },
            textRestoreDefault(){
                this.showTextStyleContent();
            },
            //生成SLD文件并传递给后台
            postSLD(){
                let that=this;
                let SLDContent='';
                console.log(this.SLDContentRSPG);
                switch (this.featurevalue) {

                    case "point":
                        SLDContent=encodeURI(this.SLDContentRSPT);
                        break;
                    case "polyline":
                        SLDContent=encodeURI(this.SLDContentRSPL);
                        break;
                    case "polygon":
                        SLDContent=encodeURI(this.SLDContentRSPG);
                        break;
                    case "text":
                        break;
                }
                let tablename=that.layername;
                let stylename=that.stylername;
                onlineStyler(tablename,stylename,SLDContent).then(r=>{
                    if (r) {
                        that.$message({
                            message: '样式修改成功！',
                            type: 'success'
                        });
                        //刷新图层
                        bus.$emit("refresh", true);

                    }
                })


            },




        },
        filters:{
            propertiesDict:function(key,layername){

            var ret= dict(that.dictinfo,key,layername)
               return ret

            }
        },
    };
</script>
<style >
    .manylayer-content{
        width: 94%;
        height:96%;
        position: absolute;
        padding: 0;
        opacity: 1;
        z-index: 1;
        right: 1%;
        bottom: 2%;
        background-color: rgba(76, 245, 255, 0);
        //background: white;
        color: white;
        border: 0;
        transition: opacity 100ms ease-in;
        display: flex;
        flex-direction: column;
        overflow: auto;

    }
    .manylayer-content-block{
        width: 96%;
        margin: 10px auto;
    }

    .el-collapse-item__header{
        display: flex;
        align-items: center;
        height: 48px;
        line-height: 48px;
        background-color: rgba(76, 245, 255, 0);
        color: #1A5CD7;
        font-weight: bold;
        cursor: pointer;
        border-bottom: 1px solid #EBEEF5;
        font-size: 16px;
        font-weight: 500;
        transition: border-bottom-color .3s;
        outline: 0;
    }
    .el-collapse-item__wrap{
        background-color: rgba(76, 245, 255, 0);
    }
</style>
